<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>

        a{
            text-decoration: none;
            display: block;
            color: bisque;
        }
        .box{
            width: 400px;
            position: relative;
        }
        .box .tp{
            width: 100%;
            height: 100%;
        }
        .box .tp img{
            width: 100%;
        }
        .nn{
            opacity: 0;
            position: absolute;
            right: 10%;
            bottom: 10%;
            width: 56px;
            height: 56px;
            background: url(anjian.png) no-repeat center center;
            transition: opacity  ease-in-out .5s;

        }
        .box:hover .nn{
            opacity: 1;
        }
        .wb{
            width: 100%;
            height: 0;
            bottom: 0;
            position: absolute;
            transition: height  ease-in-out .5s;
            overflow: hidden;
            background-color: rgba(0,0,0, 0.2);
        }
        .box:hover .wb{
            height: 100%;
        }
      

    </style>
<body>
    <div class="box">
        <a href="" class="tp">
            <img src="tupian.jpg" >
        </a>

        <a href="" class="nn"></a>

        <a href="" class="wb">
            <h1>她在那里了</h1>
            <p>远方的他，正无语凝咽，望眼欲穿。。。。</p>
        </a>
    </div>
    
</body>
</html>